<template>
  <div class="container">
  <div class="display">
    <div id="BackLink">
      <a @click="back">
        <button><span>Return</span></button>
      </a>
    </div>

    <div id="Catalog">
      <table>
        <tr>
          <th colspan="2">Order <span v-text="newOrder.orderId"></span>
            <span v-text="newOrder.orderDate"></span>
          </th>
        </tr>

        <tr>
          <th colspan="2">Billing Address</th>
        </tr>
        <tr>
          <td>First name:</td>
          <td v-text="newOrder.billToFirstName"></td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td v-text="newOrder.billToLastName"></td>
        </tr>
        <tr>
          <td>Address 1:</td>
          <td v-text="newOrder.billAddress1"></td>
        </tr>
        <tr>
          <td>Address 2:</td>
          <td v-text="newOrder.billAddress2"></td>
        </tr>
        <tr>
          <td>City:</td>
          <td v-text="newOrder.billCity"></td>
        </tr>
        <tr>
          <td>State:</td>
          <td v-text="newOrder.billState"></td>
        </tr>
        <tr>
          <td>Zip:</td>
          <td v-text="newOrder.billZip"></td>
        </tr>
        <tr>
          <td>Country:</td>
          <td v-text="newOrder.billCountry"></td>
        </tr>
        <tr>
          <th colspan="2">Shipping Address</th>
        </tr>
        <tr>
          <td>First name:</td>
          <td v-text="newOrder.shipToFirstName"></td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td v-text="newOrder.shipToLastName"></td>
        </tr>
        <tr>
          <td>Address 1:</td>
          <td v-text="newOrder.shipAddress1"></td>
        </tr>
        <tr>
          <td>Address 2:</td>
          <td v-text="newOrder.shipAddress2"></td>
        </tr>
        <tr>
          <td>City:</td>
          <td v-text="newOrder.shipCity"></td>
        </tr>
        <tr>
          <td>State:</td>
          <td v-text="newOrder.shipState"></td>
        </tr>
        <tr>
          <td>Zip:</td>
          <td v-text="newOrder.shipZip"></td>
        </tr>
        <tr>
          <td>Country:</td>
          <td v-text="newOrder.shipCountry"></td>
        </tr>
      </table>

      <div id="draw-border">
        <router-link :to="{path:'/viewOrderForm/'+newOrder.orderId}" class="Button" style="position: relative;left: 160px;bottom:40px;padding: 5px">
          <button>Confirm Pay</button>
        </router-link>
      </div>

    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "confirmOrderForm",
  data(){
    return{
      newOrder:{},
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      this.newOrder = JSON.parse(localStorage.getItem('newOrder'))
      console.log(this.newOrder)
    },
    // 返回上一页
    back(){
      this.$router.go(-1)
    },


  }

}
</script>

<style src="../../assets/css/shop.css" scoped></style>
<style scoped>
.display {
  width: 560px;
  overflow-y: auto;
  padding-top: 20px;
  height: auto;
  margin: 0 auto;
  top: 120px;
}

table {
  width: 80%;
  position: relative;
  bottom: 40px;
  line-height: 28px;
}

#BackLink {
  position: relative;
  top: 655px;
  right: 150px;
  margin: 0 auto;
}
</style>